<template>
  <div class="wrapper">
    <!-- <el-row class="queryBox">
      <el-col :span="24" class="textRight">
        <el-button
          v-if="$_permisson('/core/param/add')"
          icon="el-icon-plus"
          circle
          title="新建"
          @click="showCreate"
        />
        <el-button
          v-if="$_permisson('/core/function/search')"
          icon="el-icon-search"
          circle
          title="搜索"
        />
        <el-button
          v-if="$_permisson('/core/param/effectAll')"
          icon="el-icon-picture-outline-round"
          circle
          title="全部生效"
          @click="bindEffectAll"
        />
      </el-col>
    </el-row> -->

    <JTable :table-list="tableList" :config="tableConfig">
      <template slot="Actions" slot-scope="{row}">
        <el-button type="text" @click="handleActive(row,'more')">详情</el-button>
        <el-button v-if="$_permisson('/core/param/update')" type="text" @click="handleActive(row,'edit')">修改</el-button>
        <el-button v-if="$_permisson('/core/param/takeEffect')" type="text" @click="handleActive(row,'effect')">立即生效</el-button>
        <el-button v-if="$_permisson('/core/param/delete')" type="text" @click="handleActive(row,'del')">删除</el-button>
      </template>
      <template slot="activeBoxR">
        <el-button v-if="$_permisson('/core/param/add')" type="primary" icon="el-icon-edit" @click="showCreate">新建</el-button>
        <el-button v-if="$_permisson('/core/param/effectAll')" type="primary" icon="el-icon-finished" @click="bindEffectAll">全部生效</el-button>
        <!-- <el-button
          v-if="$_permisson('/core/function/search')"
          icon="el-icon-search"
          circle
          title="搜索"
        /> -->
      </template>
    </JTable>

    <el-dialog :title="dialog.title[dialog.active]" :before-close="hiddenDialog" :visible.sync="dialog.dialogVisible" destroy-on-close>
      <!-- <createdWidget @handleBoxEvent="handleDialog" /> -->
      <createdWidget :emit-data="currentItem" :read="dialog.active=='more'" @handleBoxEvent="handleDialog" />
    </el-dialog>
  </div>
</template>

<script>
import createdWidget from './widget/created'
import JTable from '@/components/JTable'
import pageBtn from '@/views/mixin/pageBtn'

import { list, info, add, remove, effectAll, takeEffect, update } from '@/api/params'
export default {
  components: {
    createdWidget,
    JTable
  },
  mixins: [pageBtn],
  props: {},
  data() {
    const listQuery = {
      total: 0,
      page: 1,
      size: 10,
      handleFilter: this.fetchData
    }
    const dialog = {
      dialogVisible: false,
      title: { created: '创建参数', edit: '修改参数', more: '查看详情' },
      active: ''
    }
    return {
      listQuery,
      dialog,
      listLoading: false,
      dataList: [],
      currentItem: {},
      currentId: null,
      tableConfig: {
        listLoading: this.listLoading,
        pagination: listQuery,
        thead: [
          {
            type: 'selection'
          },
          {
            type: 'index',
            label: '-',
            start: 1
          },
          {
            prop: 'name',
            label: 'name'
          },
          {
            prop: 'code',
            label: 'code'
          },
          {
            prop: 'isEffectStr',
            label: 'isEffect'
          },
          {
            prop: 'note',
            label: 'note'
          },
          {
            prop: 'status',
            label: 'status'
          },
          {
            prop: 'value',
            label: 'value'
          },
          {
            prop: '',
            label: 'Actions',
            type: 'actions',
            width: '200'
          }
        ],
        search: ['code', 'name', 'value'],
        activeBox: {
          defaultBtn: false
        }
      }
    }
  },
  computed: {
    tableList() {
      const origin = this.dataList

      return origin
    }
  },
  watch: {},
  created() {
    this.fetchData()
  },
  mounted() {},
  methods: {
    fetchData(args = {}) {
      const { page: pageNum = 1, size: pageSize = 10, ...param } = args
      const params = { pageNum, pageSize, ...param }
      this.listLoading = true
      list(params).then(res => {
        const { /* code, */ data: { list = [], total = 0 }} = res
        this.dataList = list
        this.listQuery.total = total
        this.listLoading = false
      })
    },
    showCreate() {
      const target = 'created'
      this.showDialog(target)
    },
    showDialog(target) {
      this.dialog.dialogVisible = true
      this.dialog.active = target
    },
    hiddenDialog() {
      this.dialog.dialogVisible = false
      this.currentId = null
      this.currentItem = {}
    },
    handleDialog(emit) {
      const { target } = emit
      if (!target) {
        return this.hiddenDialog()
      }
      const currentActive = this.dialog.active
      if (currentActive === 'created') {
        this.createdItem(target)
      }
      if (currentActive === 'update') {
        this.updateItem(target)
      }
      this.hiddenDialog()
    },

    updateItem(newData) {
      const params = { ...newData, id: this.currentId }
      update(params).then(res => {
        console.log('更新', res)
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.fetchData()
          return
        }
        this.$message.error(message)
      })
    },

    createdItem(item) {
      add(item).then(res => {
        console.log(res)
        this.fetchData()
      })
    },

    handleFilter() {},
    handleActive(row, target) {
      const { id } = row
      this.currentId = id
      if (target === 'del') {
        this.bindRemoveItem()
        return
      }

      if (target === 'effect') {
        const { code } = row
        this.bindTakeEffect(code)
        return
      }

      if (['more', 'edit'].includes(target)) {
        const openTarget = target
        this.openEditBox(openTarget)
      }
    },

    /**
     * @description: 打开编辑窗口，并传值到组件中
     * @param {*} openType
     * @return {*}
     */
    async openEditBox(openType) {
      const id = this.currentId
      const { code, data } = await info(id)
      if (code === 200) {
        this.currentItem = data
        this.showDialog(openType)
      }
    },

    /**
     * @description: 参数全部生效
     * @param {*}
     * @return {*}
     */
    bindEffectAll() {
      effectAll().then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message,
            type: 'success'
          })
          this.fetchData()
          return
        }
        this.$message.error(message)
      })
    },

    /**
     * @description: 生效一个参数
     * @param {*} code
     * @return {*}
     */
    bindTakeEffect(code) {
      takeEffect(code).then(res => {
        const { code, message } = res
        if (code === '200') {
          this.$message({
            message,
            type: 'success'
          })
          this.fetchData()
          return
        }
        this.$message.error(message)
      })
    },

    /**
     * @description: 删除一个参数
     * @param {*}
     * @return {*}
     */
    bindRemoveItem() {
      this.$confirm('确认删除').then(res => {
        const id = this.currentId
        remove(id).then(res => {
          const { code, message } = res
          if (code === 200) {
            this.$message({
              message,
              type: 'success'
            })
            this.fetchData()
            return
          }
          this.$message.error(message)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
